<template>
  <div class="service">
    <div class="container">
      <div class="service_cont">
        <div class="cont_top" v-for="(item,index) in serviceList" :key="index">
          <div class="sertop_left">
            <h2>{{item.title}}</h2>
            <p>{{item.title_text}}</p>
          </div>
          <div class="sertop_right">
            <form action="#">
              <input type="text" :placeholder="item.form_placeholder">
              <button>{{item.form_btn}}</button>
            </form>
          </div>
        </div>
        <div class="cont_bottom">
            <div class="item" v-for="(item,index) in serviceContList" :key="index">
              <div class="item_icon">
                <i :class="item.icon"></i>
              </div>
              <div class="item_text">
                <h2>{{item.title}}</h2>
                <p>{{item.text}}</p>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      serviceList: [],
      serviceContList: []
    }
  },
  async created () {
    const { data: res } = await this.$http.get('service')
    const { data: res2 } = await this.$http.get('service_cont')
    this.serviceContList = res2.data
    this.serviceList = res.data
  }
}
</script>

<style lang="less" scoped>
.service{
  background-color: #f5f5f5;
  padding: 3.75rem 0;
  .service_cont{
    width: 74%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .cont_top{
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      .sertop_left{
        width: 48%;
        h2{
          font-size: 1.125rem;
          color: #333;
          padding-bottom: 0.16rem;
        }
        p{
          font-size: 0.6rem;
          font-weight: 100;
        }
      }
      .sertop_right{
        width: 46%;
        form{
          display: flex;
          justify-content: space-between;
          height: 1.7rem;
          input{
            border: none;
            border-radius: 30px;
            width: 12rem;
            padding-left: 0.625rem;
            height: 100%;
            outline: none;
          }
          button{
            width: 5.5rem;
            height: 100%;
            transition: 0.5s;
            display: inline-block;
            font-size: 0.4rem;
            font-weight: 5000;
            background-color: #3d3d3d;
            color: #fff;
            text-transform: uppercase;
            border-radius: 30px;
            border: none;
            cursor: pointer;
          }
          button:hover{
            background-color: #eb2323;
          }
        }
      }
      @media screen and (max-width:992px){
        .sertop_left{
          width: 100%;
          text-align: left;
          p{
            padding: 10px 0;
          }
        }
        .sertop_right{
          width: 100%;
        }
      }
      @media screen and (max-width:768px){
        .sertop_right{
          form{
            flex-direction: column;
            height: 4.7rem;
            input{
              margin-bottom: 15px;
            }
            button{
              width: 6.5rem;
            }
          }
        }
      }
    }
    .cont_bottom{
      width: 100%;
      margin-top: 1.3rem;
      padding-top: 1.9rem;
      border-top: 1px solid #ebebeb;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item{
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item_icon{
          i{
            font-size: 1.1rem;
            padding-right: 0.8rem;
          }
        }
        .item_text{
          h2{
            font-size: 0.56rem;
            color: #333;
            margin-bottom: 0.16rem;
          }
          p{
            font-size: 0.44rem;
            color: #666;
          }
        }
      }
      @media screen and (max-width:992px){
        .item{
          width: 100%;
          padding-bottom: 30px;
        }
      }
    }
  }
}
</style>
